import { Image, Tag } from 'antd';
import moment from 'moment/moment';
import { Coordinate } from 'ol/coordinate';

export interface LineData {
  id: string;
  cityCode: string;
  cityName: string;
  lineCode: string;
  lineName: string;
  lineColor: string;
  lineCompany: string;
  lineLogo: string;
  lineCycle: boolean;
  enableDate: string;
  lineRoute: Coordinate[];
}

interface Props {
  lineData: LineData;
  stationCount: number;
}

const LineHead = (props: Props) => {
  const { lineData, stationCount } = props;
  const { isPhone, theme } = useCommonStore();

  const renderMetroLogo = () =>
    lineData.lineLogo && (
      <Image
        src={`/files/logo/${lineData.lineLogo}`}
        preview={false}
        height={60}
        width={isPhone ? 62 : undefined}
        style={{
          objectFit: 'cover',
          objectPosition: isPhone ? '0 0' : undefined,
          filter: theme === 'dark' ? 'brightness(0) invert(1)' : undefined,
        }}
      />
    );

  return (
    <div className={`${isPhone ? '' : 'flex justify-between items-center'}`}>
      <div className={`flex ${isPhone ? 'flex-col items-center' : 'gap-3'}`}>
        <div className={'flex gap-3 items-center'}>
          {isPhone && renderMetroLogo()}
          {lineData.lineCode && (
            <div
              className={
                'border-width-10 border-solid w-10 h-10 rounded-full flex items-center justify-center'
              }
              style={{ borderColor: lineData.lineColor }}
            >
              <div className={`text-6 font-700 ${theme === 'dark' ? 'text-white' : 'text-black'}`}>
                {lineData.lineCode}
              </div>
            </div>
          )}
        </div>

        <div className={`flex justify-center flex-col ${isPhone && 'items-center'}`}>
          <div
            className={`text-6 font-700 ${isPhone && 'my-2'}  ${theme === 'dark' ? 'text-white' : 'text-black'}`}
          >
            {lineData.cityName} · {lineData.lineName}
          </div>
          <div>
            {lineData.lineCompany && <Tag>{lineData.lineCompany}</Tag>}
            <Tag>{stationCount + '座车站'}</Tag>
            {lineData.enableDate && (
              <Tag>{moment(lineData.enableDate).format('yyyy年M月D日开通运营')}</Tag>
            )}
          </div>
        </div>
      </div>
      {!isPhone && renderMetroLogo()}
    </div>
  );
};

export default LineHead;
